<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">设置</button>
    <button class="get">获取</button>
    <button class="edit">修改</button>
    <button class="del">删除</button>
</body>
<script type="module">
    import { setCookie, getCookie } from "../js/cookie.js";
    // cookie的特性:
    // 1. cookie是以键值对形式存在的字符串(key=val)
    // 2. cookie的存取都依赖于document.cookie
    // 3. cookie可以设置存储路径
    // 4. cookie可以设置过期时间 (默认:浏览器关闭过期)


    // cookie的创建/获取:
    // 1. cookie是以键值对形式存在的字符串(key=val)
    // 2. cookie的存取都依赖于document.cookie
    // 3. cookie存储的时候是一条一条存储的, 取的时候将所有的cookie整合到一整个字符串中 -> 用"; "分隔

    // cookie的修改:
    // 对应键名修改 => 没有就行,有就修改

    // cookie的删除: 
    // cookie的删除 一般只能等过期时间之后才能失效(不能使用), 但是过期时间是可以设置的 => 可以将cookie的时间改为已经过去的时间  => 过期的cookie没办法使用

    // 过期的cookie并不会直接被删除,而是到等到浏览器刷新页面,浏览器关闭时 才会清除  => 1. 将键值赋值为"" 2.刷新页面

    // 注意:  document.cookie = "";   对document.cookie赋值属于新增cookie的操作(此时键名和键值都是"" -> 没有新增)


    var setBtn = document.getElementsByClassName("set")[0];
    var getBtn = document.getElementsByClassName("get")[0];
    var editBtn = document.getElementsByClassName("edit")[0];
    var delBtn = document.getElementsByClassName("del")[0];


    setBtn.onclick = function () {
        setCookie("user", "a123123", 7 * 24 * 60 * 60);
        setCookie("pwd", "123123");
        setCookie("phone", "17386141517", 1 * 24 * 60 * 60);
        setCookie("email", "a123123@163.com", 31 * 24 * 60 * 60);
    }

    getBtn.onclick = function () {
        console.log(document.cookie);

        console.log(getCookie("user"));
        console.log(getCookie("pwd"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));
        console.log(getCookie("abc"));
    }

    editBtn.onclick = function () {
        setCookie("user", "bbb123123", 7 * 24 * 60 * 60);
        setCookie("pwd", "321321");
        setCookie("phone", "17386112233", 1 * 24 * 60 * 60);
        setCookie("email", "bbbbbbb@163.com", 31 * 24 * 60 * 60);
    }

    delBtn.onclick = function () {
        console.log("删除");
        // document.cookie = "";   对document.cookie赋值属于新增cookie的操作(此时键名和键值都是"" -> 没有新增)

        setCookie("user", "", -1);
        setCookie("pwd", "", -1);
        setCookie("phone", "", -1);
        setCookie("email", "", -1);

        location.reload();
    }



</script>

</html>